<template>
	<div class="add">
		<!--  -->
		<el-dialog v-model="isShowDialog" width="700px" :close-on-click-modal="false" :destroy-on-close="true">
			<template #header>
				<div>新增外呼坐席账户</div>
			</template>
			<el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
				<el-form-item label="名称" prop="name">
					<el-input v-model="formData.name" placeholder="请输入名称" />
				</el-form-item>
				<el-form-item label="工号" prop="staffId">
					<el-input v-model="formData.staffId" placeholder="请输入名称" />
				</el-form-item>
				<el-form-item label="坐席等级" prop="seatLevel">
					<el-input-number v-model="formData.seatLevel" placeholder="请输入坐席等级" />
				</el-form-item>
				<el-form-item label="话机类型" prop="phoneType">
					<el-select v-model="formData.phoneType" placeholder="请选择话机类型" clearable style="width: 100%;">
						<el-option v-for="item in phoneTypeList" :value="item.value" :label="item.label"
							:key="`phone${item.value}`" />
					</el-select>
				</el-form-item>
				<el-form-item label="字段话后" prop="autoAfterCall">
					<el-select v-model="formData.autoAfterCall" placeholder="请选择字段话后" clearable style="width: 100%;">
						<el-option v-for="item in autoAfterCallList" :value="item.value" :label="item.label"
							:key="`call${item.value}`" />
					</el-select>
				</el-form-item>
				<el-form-item label="外呼线路" >
					<el-select v-model="formData.lines" multiple placeholder="请选择外呼线路" clearable style="width: 100%;">
						<el-option v-for="item in outcallLineData" :value="item.value" :label="item.label"
							:key="`line${item.value}`" />
					</el-select>
				</el-form-item>
				<el-form-item label="企业名称" prop="companyCode">
					<el-select v-model="formData.companyCode" placeholder="请选择企业名称" clearable style="width: 100%;" filterable @change="changeCompanyCode()" >
						<el-option v-for="item in companyData" :value="item.value" :label="item.label"
							:key="`companyCode${item.value}`" />
					</el-select>
				</el-form-item>
				<el-form-item label="分机号" >
					<el-select v-model="formData.extNum" placeholder="请选择分机号" clearable style="width: 100%;" :disabled="!formData.companyCode">
						<el-option v-for="item in phoneExtData" :value="item.label" :label="item.label"
							:key="`extNum${item.value}`" />
					</el-select>
				</el-form-item>
				<el-form-item label="坐席组">
					<el-select v-model="formData.seatGroups" multiple placeholder="请选择坐席组" clearable style="width: 100%;" :disabled="!formData.companyCode">
						<el-option v-for="item in seatGroupData" :value="item.value" :label="item.label"
							:key="`seatGroups${item.value}`"/>
					</el-select>
				</el-form-item>

			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="onCancel">取 消</el-button>
					<el-button type="primary" @click="onSubmit" :loading="loading">确 定</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>
<script lang="ts">
import { reactive, toRefs, defineComponent, ref, unref, getCurrentInstance } from 'vue';
import { ElMessageBox, ElMessage, FormInstance, UploadProps } from 'element-plus';
import { editOutcallAccountApi } from '@/api/operationsManage/outcallAccount'
import { selectPhoneExtApi } from '@/api/operationsManage/phoneExt';
import {  selectSeatGroupApi } from '@/api/operationsManage/seatGroupManage';
export default defineComponent({
	name: 'outcallAccountAdd', //外呼坐席账户管理 -新增
	props: {
		companyData: {
			type: Array,
			default: () => []
		},
		phoneTypeList: {
			type: Array,
			default: () => []
		},
		autoAfterCallList: {
			type: Array,
			default: () => []
		},
		outcallLineData:{
			type: Array,
			default: () => []
		}
	},
	setup(props, { emit }) {
		const formRef = ref<HTMLElement | null>(null);
		const menuRef = ref();
		const state = reactive({
			loading: false,
			isShowDialog: false,
			phoneExtData: [],	//分机号
			seatGroupData: [],	//坐席组
			formData: {
				id:undefined,
				companyCode: undefined,
				name: undefined,
				staffId: undefined,
				phoneType: undefined,
				autoAfterCall: undefined,
				seatLevel: undefined,
				extNum: undefined,
				seatGroups: [],
				lines:[]
			},
			// 表单校验
			rules: {
				companyCode: [{ required: true, message: '企业不能为空', trigger: 'blur' }],
				name: [{ required: true, message: '企业不能为空', trigger: 'blur' }],
				staffId: [{ required: true, message: '工号不能为空', trigger: 'blur' }],
				phoneType: [{ required: true, message: '话机类型不能为空', trigger: 'blur' }],
				autoAfterCall: [{ required: true, message: '字段话后不能为空', trigger: 'blur' }],
				seatLevel: [{ required: true, message: '坐席等级不能为空', trigger: 'blur' }],
			},
		});
		// 打开弹窗
		const openDialog = (row) => {
			resetForm();
			state.formData=row
			changeCompanyCode('init')
			state.isShowDialog = true;
		};

		// 关闭弹窗
		const closeDialog = () => {
			state.isShowDialog = false;
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};

		// 提交
		const onSubmit = () => {
			const formWrap = unref(formRef) as any;
			if (!formWrap) return;
			formWrap.validate((valid: boolean) => {
				if (valid) {
					editOutcallAccountApi(state.formData).then((res: any) => {
						if (res.code === 200) {
							ElMessage.success('修改成功');
							closeDialog(); // 关闭弹窗
							emit('getList');
						} else {
							state.loading = false;
						}
					})
				}
			});
		};

		const resetForm = () => {
			state.formData = {
				id:undefined,
				companyCode: undefined,
				name: undefined,
				staffId: undefined,
				phoneType: undefined,
				autoAfterCall: undefined,
				seatLevel: undefined,
				extNum: undefined,
				seatGroups: [],
				lines:[]
			};
		};
		const changeCompanyCode=async(status='change')=>{
			if(status=='change'){
				state.formData.extNum=undefined
			state.formData.seatGroups=[]
			}
			try {
				// 使用 Promise.all 同时发起两个请求
				const [res1, res2] = await Promise.all([
					selectPhoneExtApi({id:state.formData.companyCode}),	// 获取分机号下拉
					selectSeatGroupApi({id:state.formData.companyCode}) 		// 获取企业下拉
				]);
				state.phoneExtData =selectData(res1.data) ; // 假设 res1.data 是下拉选项
				state.seatGroupData =selectData(res2.data); // 假设 res2.data 是下拉选项

				function selectData(data){
					if(!data) return []
					let arr=[]
					for(let key in data){
						let obj={
							value:key,
							label:data[key]
						}
						arr.push(obj)
					}
					return arr
				}
			} catch (error) {
				// 处理任何请求中的错误
				console.error('Error fetching data:', error);
			}
		}
		return {
			openDialog,
			closeDialog,
			onCancel,
			onSubmit,
			resetForm,
			menuRef,
			formRef,
			changeCompanyCode,
			...toRefs(state),
		};
	},
});
</script>
